<script setup>

import { onReachBottom, onShow } from '@dcloudio/uni-app'
import { trim } from '@/uni_modules/uview-plus';
import { ref, reactive } from 'vue'
import { getSpuListApi } from '@/api/shop.js'
// 数据
const data = reactive({
  userId: '',
  list: [],
  keyword: '',
  pageNo: 1, // 当前页码
  pageSize: 20, // 每页数量
  totalPages: 10, // 总页数
  page: 1,
  status: 'loadmore'
})
onShow(() => {
  data.userId = uni.getStorageSync('userId');
})
// 校验是否用户已登录
const checkLogin = () => {
  if (data.userId === '') {
    goLoginPage()
    return false
  }
}
// 前往登录页面
function goLoginPage() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
// 搜索
const onChange = (e) => {
  if (!trim(e)) {
    data.list = []
    return false
  }
  data.keyword = e
  data.pageNo = 1
  getList()
}
// 前往商品详情页面
function goProductDetail(id) {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/shop/detail?id=' + id
  })
}
// 监听页面滚动到底部
onReachBottom(() => {
  if (data.status !== 'loadmore') return
  getList()
})
// 查询商品分页
function getList() {
  data.status = 'loading';
  getSpuListApi({
    pageNo: data.pageNo,
    pageSize: data.pageSize,
    keyword: data.keyword
  })
    .then(res => {
      // console.log('res', res);
      const { list, total } = res.data
      data.totalPages = Math.ceil(total / data.pageSize)
      list.forEach(item => {
        item.name = item.name.replace(data.keyword, `<span style="color: #ff0000">${data.keyword}</span>`)
      })
      data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
      data.pageNo++;
      data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
    })
}
</script>

<template>
  <view class="shop-seach-page">
    <!-- 搜索框 -->
    <view class="seach-box">
      <up-search :show-action="true" actionText="搜索" height="60rpx" :showAction="false" bgColor="#FFFFFF"
        @change="onChange"></up-search>
    </view>
    <!-- 列表 -->
    <view class="list-box">
      <!-- 空状态 -->
      <up-empty v-if="data.list.length <= 0" mode="search" text="暂无搜索结果" marginTop="200rpx">
      </up-empty>
      <!-- 列表 -->
      <template v-else>
        <view class="list">
          <view class="item" v-for="(item, index) in data.list" :key="index" @click="goProductDetail(item.id)">
            <up-icon name="search" size="22" color="#C8C9CD"></up-icon>
            <rich-text class="up-line-1" :nodes="item.name"></rich-text>
          </view>
        </view>
        <!-- 加载更多 -->
        <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.shop-seach-page {
  padding-bottom: 30rpx;

  // 搜索框
  & .seach-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    box-sizing: border-box;
    padding: 12rpx 32rpx;
    height: 88rpx;
    width: 750rpx;
    background-color: #1A1A1A;
  }

  // 列表
  & .list-box {
    padding-top: 88rpx;

    & .item {
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 56rpx;
      height: 88rpx;

      &:last-child {
        &::after {
          background-color: transparent;
        }
      }

      & rich-text {
        margin-left: 12rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #303B45
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 1rpx;
        width: calc(100vw - 64rpx);
        background-color: #F4F4F4;
      }
    }
  }
}
</style>